
<template>
    <div>
        <Form :inline="true">
             <FormItem label="模板类别："label-position="right" :label-width="100" >
                <Input v-model="temp"  :readonly="true"></Input>
            </FormItem>
            <FormItem label="模板用途："label-position="right" :label-width="100" >
                <Select v-model="info.type_2" clearable  placeholder="请选择模板用途：..."  style="width:200px;">
                    <Option value="*">全部用途</Option>
                    <Option v-for="item in mes_type_arr" :value="item.value" :key="item.value">{{ item.label }}</Option>  
                </Select>
            </FormItem>
            <FormItem style="margin-left:9%">
                <Button  type="primary" style="margin-right:10px" @click="search_template()">查找模板</Button>
                <Button  type="error" @click="open_create_template()" v-if="checkPermission('111833')">新建模板</Button>
            </FormItem>
        </Form>
        <Table border stripe :columns="columns1" :data=" templatelist" style="margin-top:8px" ></Table>
        <AutoPage v-model="page"></AutoPage>
        <!-- 修改模板 --> <!-- 新建模板 -->
         <Modal v-model="modal2" width="1000" :mask-closable="false" :scrollable="false">
            <p slot="header" style="color:#2b85e4;text-align:center"  >
                <Icon type="message"></Icon>
                <span>系统模板</span>
            </p>
            <div style="font-size:15px; padding-right:5%; padding-left:5%">
                <Form :inline="true"> 
                    <FormItem label="模板类别：" label-position="right" :label-width="80" >
                        <Select v-model="current.type_1"  clearable placeholder="请选择模板类别..."  style="width:130px;">  
                            <Option value="message">短信模板</Option>             
                        </Select>
                    </FormItem>
                    <FormItem label="模板用途：" label-position="right" :label-width="80" >
                        <Select v-model="current.type_2" clearable placeholder="请选择模板用途..." style="width:130px;z-index:1001;position:relative;">  
                            <Option v-for="item in mes_type_arr" :value="item.value" :key="item.value">{{ item.label }}</Option>        
                        </Select>
                    </FormItem>
                    <FormItem style="margin-left:10%">
                        <Button type="warning"  @click="create_template()">确定</Button>
                        <!-- {{current.id ? "修改" : "新建" }} -->
                    </FormItem> 
                </Form>
                <Form>
                    <FormItem label="模板CODE" label-position="right" :label-width="80">
                        <Input v-model="current.content" type="textarea" :rows="2" placeholder="请输入阿里云短信模板CODE"></Input>
                    </FormItem> 
                </Form>
                <Form>
                    <FormItem label="使用说明：" label-position="right" :label-width="80">
                        <Input v-model="current.introduction" type="textarea" :rows="5" placeholder="请输入模板简介以及使用简介..."></Input>
                    </FormItem> 

                </Form> 
                
            </div>
            <div slot="footer" style="text-align:center"></div>
        </Modal>
    </div>
</template>

<script>
import HelpDocument from "@/common/model/HelpDocument";
import UE from '@/common/components/UE';
import Page from "@/common/model/Page";
import AutoPage from "@/common/components/AutoPage";
import AutoQuery from "@/common/components/AutoQuery";
import Template from "@/common/model/Template";
import parent from "../Parent";
// var types = {
//     phone: {
//         register: { name: "注册验证", introduction: "wqrgwegw" },
//     },
//     message: {
//         reset_password: { name: "重置密码成功", introduction: "ol,mnb" },
//     },
// };

export default {
    extends:parent,
    data () {
        var info = new Template();

        var mes_type_arr = [
            { value: "0", label:  "不限" },
            { value: "1", label:  "注册验证" },
            { value: "2", label: "重置密码" },
            { value: "3", label: "绑定手机号码" },
            { value: "4", label: "解绑手机号码" },
            { value: "5", label: "系统消息" },
            { value: "6", label: "服务方申请需求" },
            { value: "7", label: "需求方申请服务" },
            { value: "8", label: "对接有新进展" }
        ];
        
        var mes_type = mes_type_arr.reduce( (pre, current) => {
            pre[current.value] = current.label;
            return pre;
        }, {});

        return {
            // types: types,
            temp:'短信模板',
            info: {
                type_1:'message',
                type_2:info.type_2,
                content_type:'*',
            },
            mes_type_arr: mes_type_arr,
            mes_type: mes_type,
            query: { // 查询条件
                type_1: { type: "select", label: "模板类别：", default: "message", placeholder: "请选择模板类别", options: [
                        { value: "message", label:  "短信模板" },
                ] },
                type_2: { type: "select", label: "模板用途：", default: "0", placeholder: "请选择模板用途", options: mes_type_arr },
                content_type: { type: "select", label: "内容形式：", default: "0", placeholder: "请选择内容形式", options: [
                        { value: "0", label:  "不限" },
                        { value: "html", label: "HTML模板" },
                        { value: "content", label: "网页模板" },
                        { value: "text", label: "文本模板" },
                ] },
                begin_time: { type: "date", label: "日期", placeholder: "选择开始时间" },
                end_time: { type: "date", placeholder: "选择截止时间", handleValue: value => { return value + 24*60*60*1000 } },
            },
            //用于清空对话框中的历史操作数据
            renovate:new Template(), 
            modal1: false,
            modal2: false, 
            current:new Template(),    //查询、编辑后返回的值
            page: new Page("template/search_template", this.handle_Searchformitem(info)),
            columns1: [
                {
                    title: '模板用途', render: (h, params) => {        
                        var type_2 = mes_type[params.row.type_2];
                        return h('div', type_2);
                    }
                },
                {
                    title: '模板CODE',
                    key: 'content'
                },
                { 
                    title: '模板简介',
                    render: (h, params) => {
                        var introduction =  params.row.introduction;
                        var len = Math.min(30, introduction.length);
                        return h('div', introduction.substring(0, len));
                    }
                },
                {
                    title:"创建时间",
                     render:(h,params) =>{
                        return h('div',params.row.create_time == "Invalid Date NaN:NaN" ? '无':params.row.create_time);
                    }
                },
                // {
                //     title:"上次修改",
                //     render:(h,params) =>{
                //         return h('div',params.row.renovate_time == "Invalid Date NaN:NaN" ? '无':params.row.renovate_time);
                //     }
                //     //key:"renovate_time"
                // },
                {
                    title: '操作',
                    width: 225,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                //props: { type: 'primary', size: 'small', disabled: params.row.type_2 == 5 },
                                props: { type: 'primary', size: 'small'},
                                style: { marginRight: '5px',display:this.showButton("111532")},
                                on: { click: () => { this.selectTemplate(params) } }
                            }, this.useOrNOt(params)),
                            h('Button',{
                                props:{
                                    type:'warning',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',
                                    display: this.showButton("111812")
                                },
                                on:{
                                    click: () =>{
                                        this.delete_template(params.index)
                                    }
                                }
                            },'删除'),
                            h('Button', {
                                props: {
                                    type: 'success',
                                    size: 'small'
                                },
                                style: {
                                    display: this.showButton("111812")
                                },
                                on: {
                                    click: () => {
                                        this.change_template(params.index)
                                    }
                                }
                            }, '修改')
                        ]);
                        }
                    }
            ] 
        }
    },
    computed:{
        templatelist(){
            return Template.parseList(this.page.list); //表格所显示的数据
        }       
    },
    components: {
        AutoPage
    },
    methods: {
        useOrNOt(data){
            var id =  data.row.selected;
            if(id == '1'){
                return "已启用";
            }else{
                return "启用";
            }
        },
        selectTemplate(data){
            data = data.row;
            this.api.post("template/select_template", {id:data.id,type_1:data.type_1,type_2:data.type_2}, res => {
                this.page.getData();
                if(res.value)
                this.$CustomMessage.success("已启用");
                else
                this.$CustomMessage.error("启用失败");
            }); 
        },
        //处理查询方法所需要的条件
        handle_Searchformitem(data) {                                
            return {
                type_1: "message",
                type_2: data.type_2,
                content_type: data.content_type  
            }
        },
        //清空新建模板对话框中的历史数据
        handle_Renovate(data) {
            data.id = null,    
            data.type_1 = "message";
            data.type_2 = "";
            data.content_type = "";
            data.introduction = "";
            data.content = "";
            return data
        },
        //处理详情页面所显示内容格式
        handle_format_content_type(data){
            var s = "";
            switch(data){
                case'text':s = '文本模板';break;
                case'html':s = 'HTML模板';break;
                case'content':s = '网页模板';break;
            }
            return s;
        },
        //处理详情页面所显示的事件类别
        handle_format_type2(data){
            return this.mes_type[data];
        },
        //搜索模板
        search_template(){
            console.log(this.info);
            this.page.action_data = this.handle_Searchformitem(this.info);
            this.page.getData();
        },
        //打开创建模板对话框
        open_create_template(){
            this.handle_Renovate(this.current);           
            this.modal2 = true;
        },
        //创建模板
        create_template(){
            this.$Modal.confirm({
                    title: '请确认您的操作',
                    content: '<p>继续修改或者新建，请点击确定按钮</p><br><p>取消，请点击取消按钮</p>',
                    onOk: () => {
                        //this.current.content = this.$refs.ues.getUEContent();
                        this.api.post(this.current.id ? "template/change_template" : "template/create_template", this.current.serialize(), res => {
                            this.$CustomMessage.success(this.current.id ? "模板修改成功" : "模板创建成功");
                            this.page.getData();
                            this.handle_Renovate(this.current);  
                            this.modal2 = false;
                        });
                    },
                    onCancel: () => {
                        this.$CustomMessage.info('取消修改');
                    }
            });     
        },
        //打开编辑模板
        change_template(index){
            this.modal2 = true;
            this.current = this.templatelist[index];
            this.current.content = this.templatelist[index].content;
            console.log(this.templatelist[index]);
            console.log(this.current);
        },
        //打开详情页面
        open_show(index){
            this.modal1 = true; 
            this.current = this.templatelist[index];
            console.log(this.templatelist[index]);
        },
        //关闭详情页面
        close_show(index){
            this.modal1 = false;
        },
        //删除模板
        delete_template(index){
                this.$Modal.confirm({
                    title: '确认删除？',
                    content: '<p>继续删除请点击确定按钮（删除后不可恢复）</p><p>取消请点击取消按钮</p>',
                    onOk: () => {
                        this.api.post("template/delate_template", {id:this.templatelist[index].id}, res => {
                            this.page.getData();
                            this.$CustomMessage.success("删除成功");
                        });   
                    },
                    onCancel: () => {
                        this.$CustomMessage.info('取消删除');
                    }
                });             
        }
    }
}
</script>
<style>
    .span{
      font-size:16px;
    }
   .button{
       margin-top:10px;
       margin-left:33%;
       font-size:15px;
       width:30%;
   }
</style>